<template>
	<view class="container">
		<view class="top">
		</view>
		<uni-card class="card">
			<uni-forms :modelValue="formData" ref="form">
				<!-- 优惠券名称 -->
				<uni-forms-item label="名称" required>
					<uni-easyinput v-model="formData.name" placeholder="请输入优惠券名称" />
					<text v-if="errorMessages.name" class="error">{{ errorMessages.name }}</text>
				</uni-forms-item>

				<!-- 优惠券类型 -->
				<uni-forms-item label="类型" required>
					<uni-data-checkbox v-model="formData.type" :localdata="type" />
				</uni-forms-item>

				<!-- 活动内容 -->
				<uni-forms-item label="内容" required>
					<view v-if="formData.type === 0" class="inline-input">
						满 <uni-easyinput class="content-input" v-model="formData.full" input-type="number" /> 元减
						<uni-easyinput class="content-input" v-model="formData.reduce" input-type="number" /> 元
					</view>
					<view v-if="formData.type === 1" class="inline-input">
						打 <uni-easyinput class="content-input" v-model="formData.discount" input-type="number" /> 折
					</view>
				</uni-forms-item>

				<!-- 发放时间 -->
				<uni-forms-item label="发放时间" required>
					<uni-datetime-picker type="datetime" return-type="timestamp" v-model="formData.startTime" />
					<text class="spacer">至</text>
					<uni-datetime-picker type="datetime" return-type="timestamp" v-model="formData.endTime" />
					<text v-if="errorMessages.endTime" class="error">{{ errorMessages.endTime }}</text>
				</uni-forms-item>

				<!-- 投放数量 -->
				<uni-forms-item label="投放数量" required>
					<uni-easyinput v-model="formData.counted" placeholder="请输入数量" input-type="number" />
				</uni-forms-item>

				<!-- 每人限额 -->
				<uni-forms-item label="每人限额" required>
					<uni-easyinput v-model="formData.limited" placeholder="请输入限额" input-type="number" />
				</uni-forms-item>

				<!-- 使用有效期 -->
				<uni-forms-item label="使用有效期" required>
					<uni-datetime-picker type="datetime" return-type="timestamp" v-model="formData.useTime" />
					<text class="spacer">至</text>
					<uni-datetime-picker type="datetime" return-type="timestamp" v-model="formData.useendTime" />
					<text v-if="errorMessages.validTime" class="error">{{ errorMessages.validTime }}</text>
				</uni-forms-item>
			</uni-forms>
		</uni-card>

		<view class="footer">
			<u-button text="确认投放" class="btn" @click="submitForm" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					type: 0, // 默认选择满减券
					full: '',
					reduce: '',
					discount: '',
					startTime: '',
					endTime: '',
					counted: '',
					limited: '',
					useTime: '',
					useendTime: ''
				},
				errorMessages: {},
				type: [{
						text: '满减券',
						value: 0
					},
					{
						text: '打折券',
						value: 1
					}
				]
			};
		},
		onLoad() {
			this.formData.shopId = uni.getStorageSync("shopId");
		},
		methods: {
			clean() {
				this.formData = {
					name: '',
					type: 0, // 默认选择满减券
					full: '',
					reduce: '',
					discount: '',
					startTime: '',
					endTime: '',
					counted: '',
					limited: '',
					useTime: '',
					useendTime: '',
					shopId: ''
				}
				this.formData.shopId = uni.getStorageSync("shopId");
			},

			add() {

				let that = this
				this.$http({
					url: '/api/shop/coupon',
					method: 'POST',
					data: that.formData,
					success(res) {
						if (res.data.code == 200) {
							uni.showToast({
								title: '投放成功',
								duration: 1000,
								icon: 'success',
							});
							that.clean();
						} else {
							uni.showToast({
								title: '投放失败，请重新尝试',
								duration: 1000,
								icon: 'error'
							});
						}
					}
				})

			},
			submitForm() {
				this.errorMessages = {}; // 清空错误信息

				// 校验逻辑
				if (!this.formData.name) this.errorMessages.name = '优惠券名称不能为空';
				if (!this.formData.startTime || !this.formData.useendTime) {
					this.errorMessages.suseendTime = '发放时间不能为空';
				} else if (this.formData.startTime >= this.formData.useendTime) {
					this.errorMessages.suseendTime = '结束时间必须晚于开始时间';
				}
				if (!this.formData.useTime || !this.formData.useendTime) {
					this.errorMessages.validTime = '使用有效期不能为空';
				} else if (this.formData.useTime >= this.formData.useendTime) {
					this.errorMessages.validTime = '有效期结束时间必须晚于开始时间';
				}

				// 提交逻辑
				if (Object.keys(this.errorMessages).length === 0) {
					console.log('表单数据:', this.formData);
					this.add()
				}
			}
		}
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		gap: 5rpx;
	}

	.top {
		padding-right: 20rpx;
		padding-left: 20rpx;
		height: 360rpx;
		background-color: #2f81fa;
		padding-top: 60rpx;
	}

	.card {
		width: 90%;
		position: relative;
		left: -15rpx;
		top: -360rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.uni-forms-item {

		display: flex;
		align-items: center;
		/* 垂直居中 */
		margin-bottom: 40rpx;
	}

	.uni-forms-item .uni-easyinput,
	.uni-forms-item .uni-datetime-picker {
		flex: 1;
		/* 填满剩余空间 */
		font-size: 18rpx;
	}

	.inline-input {
		display: flex;
		align-items: center;
	}

	.content-input {
		width: 90rpx;
		text-align: center;
		font-size: 22rpx;
	}

	.error {
		color: red;
		font-size: 22rpx;
		margin-top: 4rpx;
	}

	.footer {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}

	.btn {
		position: relative;
		top: -300rpx;
		width: 80%;
		border-radius: 50rpx;
		background-color: #1e90ff;
		color: white;
	}

	.spacer {
		margin: 0 10rpx;
	}
</style>